<template>
  <div class="content-bottom">
    <div class="box">
      <div class="left-box bottom-box">
        <div class="top-item">
          <span class="item-title">左装载机</span>
          <span class="item-status">正常</span>
        </div>
        <div class="top-item">
          <span class="item-title">电流</span>
          <span class="item-value">90.1A</span>
        </div>
      </div>
      <div class="center-box bottom-box">
        <div class="top-item" style="padding-bottom: 0.625rem;padding-top: 1.25rem">
          <span class="item-title">掘进机</span>
          <span class="item-status">运行</span>
        </div>
        <div
          class="center-item"
          v-for="(item, index) in centerLists"
          :key="index"
        >
          <span class="item-title">{{ item.title }}</span>
          <div style="display: inline-block">
            <span class="item-value">{{ item.value }}</span>
            <span class="item-cam">{{ item.cam }}</span>
          </div>
        </div>
      </div>
      <div class="right-box bottom-box">
        <div class="top-item">
          <span class="item-title">右装载机</span>
          <span class="item-status">正常</span>
        </div>
        <div class="top-item">
          <span class="item-title">电流</span>
          <span class="item-value">90.1A</span>
        </div>
      </div>
    </div>
    <div class="resourcecontrol">
      <div
        v-for="(item, index) in pumpMapList"
        :key="index"
        :class="{ resource: true, active: currentItem === item.id }"
        @click="handleResourceClick(item)"
      >
        <span class="name">{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { pumpMapList, centerInfo } from './titles';
export default {
  props: {
    currentItem: String
  },
  data() {
    return {
      pumpMapList: [],
      centerInfo: []
    };
  },
  computed: {
    centerLists() {
      return this.centerInfo[this.currentItem];
    }
  },
  watch: {},
  mounted() {
    this.pumpMapList = pumpMapList;
    this.centerInfo = centerInfo;
    this.handleResourceClick({ id: this.currentItem });
  },
  methods: {
    handleResourceClick(val) {
      const { id } = val;
      // TODO:禁止非 4034上09运顺标签 跳转
      if (id === '4034_09YS') {
        this.$router.push({ name: 'excavationDetails', params: { id }});
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.content-bottom {
  position: fixed;
  left: 50%;
  bottom: 2.5rem;
  z-index: 10;
  transform: translateX(-50%);
  width: 59.3125rem;
  .box{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: .625rem;
  }
  .bottom-box {
    .top-item {
      display: flex;
      justify-content: space-between;
      padding: 1.25rem 1.875rem 0.9375rem;
      box-sizing: border-box;
      .item-title {
        font-size: 1rem;
        color: #ffffff;
      }
      .item-status {
        font-size: 0.875rem;
        color: #57ffaa;
      }
      .item-value {
        font-size: 0.875rem;
        color: #ffffff;
      }
    }
    .top-item:last-child {
      padding: 0 1.875rem 0;
    }
  }
  .left-box {
    width: 14.375rem;
    height: 5.8125rem;
    background-image: url("@/assets/img/excavation/left-bootom-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .center-box {
    width: 16.25rem;
    height: 11.25rem;
    background-image: url("@/assets/img/excavation/center-bottom-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .center-item {
      display: flex;
      justify-content: space-between;
      padding: 0 1.875rem 0.625rem;
      box-sizing: border-box;
      .item-title {
        font-size: 1rem;
        color: #ffffff;
      }
      .item-value {
        font-size: 0.875rem;
        color: #00fdff;
        margin-right: 0.3125rem;
      }
      .item-cam {
        font-size: 0.875rem;
        color: #ffffff;
      }
    }
    .center-item:last-child {
      padding: 0 1.875rem 0;
    }
  }
  .right-box {
    width: 14.375rem;
    height: 5.8125rem;
    background-image: url("@/assets/img/excavation/left-bootom-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
.resourcecontrol {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9375rem 1.875rem;
  height: 3.125rem;
  background-color: rgba($color: $black, $alpha: 0.4);
  .return-box {
    width: 5.1875rem;
    height: 1.875rem;
    line-height: 1.875rem;
    border-right: 0.0625rem solid rgba(0, 0, 0, 0.2);
    font-weight: bold;
    color: $cyan;
    cursor: pointer;
    img {
      margin-right: 0.3125rem;
      width: 1.25rem;
      height: 1.25rem;
      vertical-align: text-bottom;
    }
  }
  .resource {
    color: $light2Grey;
    cursor: pointer;
    .icon {
      position: relative;
      top: 0.25rem;
      margin-right: 0.625rem;
      width: 1.25rem;
      height: 1.25rem;
    }
    &.active {
      .name {
        color: $cyan;
      }
    }
  }
}
</style>
